<template>
  <div class="data-overview">
    <div class="top">
      <img src="@/assets/images/sgjHome/left-icon.png" alt="" />
      <span>数据概览</span>
      <img src="@/assets/images/sgjHome/right-icon.png" alt="" />
    </div>
    <div class="line"></div>
    <div class="content-wrap">
      <el-row>
        <el-col :span="6">
          <div class="item">
            <img src="@/assets/images/sgjHome/user.png" alt="" />
            <div>
              <div class="num">34578</div>
              <div class="title">用户数量</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="item">
            <img src="@/assets/images/sgjHome/nftlend.png" alt="" />
            <div>
              <div class="num">34578</div>
              <div class="title">贡献者数量</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="item">
            <img src="@/assets/images/sgjHome/dboceanbase.png" alt="" />
            <div>
              <div class="num">34578</div>
              <div class="title">数据开源数量</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="item codehosting">
            <img src="@/assets/images/sgjHome/codehosting.png" alt="" />
            <div>
              <div class="num">34578</div>
              <div class="title">代码托管数量</div>
            </div>
          </div>
        </el-col>
      </el-row>
      <div style="margin-top: 14px">
        <el-row>
          <el-col :span="6">
            <div class="item">
              <img src="@/assets/images/sgjHome/opensource.png" alt="" />
              <div>
                <div class="num">34578</div>
                <div class="title">能力开源数量</div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="item">
              <img
                src="@/assets/images/sgjHome/applicationScenarios.png"
                alt=""
              />
              <div>
                <div class="num">34578</div>
                <div class="title">应用开源数量</div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="item">
              <img src="@/assets/images/sgjHome/project.png" alt="" />
              <div>
                <div class="num">34578</div>
                <div class="title">开源项目数量</div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="item codehosting">
              <img src="@/assets/images/sgjHome/interestGroup.png" alt="" />
              <div>
                <div class="num">34578</div>
                <div class="title">特别兴趣小组数量</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      theme: this.$store.state.settings.theme,
      sideTheme: this.$store.state.settings.sideTheme,
      munuList: [
        { name: "首页", path: "/index" },
        { name: "开源代码共享", path: "/code-sharing" },
        { name: "科创问答GPT", path: "/questions-answer" },
        { name: "课程学习", path: "/course-learning" },
        { name: "技术前沿", path: "/technological-frontier" },
        { name: "科创论坛", path: "/technology-innovation" },
        { name: "极客揭榜", path: "/geek-unveiling" },
        { name: "创新创意大赛", path: "/creative-competition" },
        { name: "积分奖励兑换", path: "/point-rewards" },
      ],
      currentIndex: 0,
    };
  },
  computed: {
    visible: {
      get() {
        return this.$store.state.settings.showSettings;
      },
    },
    fixedHeader: {
      get() {
        return this.$store.state.settings.fixedHeader;
      },
      set(val) {
        this.$store.dispatch("settings/changeSetting", {
          key: "fixedHeader",
          value: val,
        });
      },
    },
    topNav: {
      get() {
        return this.$store.state.settings.topNav;
      },
      set(val) {
        this.$store.dispatch("settings/changeSetting", {
          key: "topNav",
          value: val,
        });
        if (!val) {
          this.$store.dispatch("app/toggleSideBarHide", false);
          this.$store.commit(
            "SET_SIDEBAR_ROUTERS",
            this.$store.state.permission.defaultRoutes
          );
        }
      },
    },
    tagsView: {
      get() {
        return this.$store.state.settings.tagsView;
      },
      set(val) {
        this.$store.dispatch("settings/changeSetting", {
          key: "tagsView",
          value: val,
        });
      },
    },
    sidebarLogo: {
      get() {
        return this.$store.state.settings.sidebarLogo;
      },
      set(val) {
        this.$store.dispatch("settings/changeSetting", {
          key: "sidebarLogo",
          value: val,
        });
      },
    },
    dynamicTitle: {
      get() {
        return this.$store.state.settings.dynamicTitle;
      },
      set(val) {
        this.$store.dispatch("settings/changeSetting", {
          key: "dynamicTitle",
          value: val,
        });
      },
    },
  },
  methods: {
    // 切换菜单
    changeMenu(val, path) {
      console.log(path, "path====");
      this.currentIndex = val;
      this.$router.push({ path: path });
    },
    themeChange(val) {
      this.$store.dispatch("settings/changeSetting", {
        key: "theme",
        value: val,
      });
      this.theme = val;
    },
    handleTheme(val) {
      this.$store.dispatch("settings/changeSetting", {
        key: "sideTheme",
        value: val,
      });
      this.sideTheme = val;
    },
    saveSetting() {
      this.$modal.loading("正在保存到本地，请稍候...");
      this.$cache.local.set(
        "layout-setting",
        `{
            "topNav":${this.topNav},
            "tagsView":${this.tagsView},
            "fixedHeader":${this.fixedHeader},
            "sidebarLogo":${this.sidebarLogo},
            "dynamicTitle":${this.dynamicTitle},
            "sideTheme":"${this.sideTheme}",
            "theme":"${this.theme}"
          }`
      );
      setTimeout(this.$modal.closeLoading(), 1000);
    },
    resetSetting() {
      this.$modal.loading("正在清除设置缓存并刷新，请稍候...");
      this.$cache.local.remove("layout-setting");
      setTimeout("window.location.reload()", 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
.data-overview {
  padding: 48px 262px;
  .top {
    text-align: center;
    img {
      vertical-align: middle;
    }
    span {
      margin: 0 10px;
      vertical-align: middle;
      font-size: 24px;
      color: rgb(68, 75, 86);
      font-weight: 700;
    }
  }
  .line {
    height: 1px;
    background: rgb(190, 213, 255);
    margin-top: 16px;
  }
  .content-wrap {
    margin-top: 24px;
    .item {
      border-radius: 20px;
      background: rgb(248, 251, 255);
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 23px 20px;
      margin-right: 14px;
      &.codehosting {
        margin-right: 0;
      }
      img {
        margin-right: 10px;
      }
      .num {
        color: rgb(86, 99, 139);
        font-family: SourceHanSansCN-VF-2;
        font-size: 29.07px;
        font-weight: 700;
        line-height: 33.91px;
        letter-spacing: 0px;
        text-align: left;
        margin-bottom: 10px;
      }
      .title {
        color: rgb(89, 97, 111);
        font-family: SourceHanSansCN-VF-2;
        font-size: 20px;
        font-weight: 400;
        line-height: 26.64px;
        letter-spacing: 0px;
        text-align: left;
      }
    }
  }
}
</style>
